<template>
  <div>
    <el-button :icon="Plus" type="primary" :disabled="!categoryStore.category3Id" @click="emits('changeScene',2)">添加SPU</el-button>

    <!-- 数据列表项 -->
    <el-table border :data="spuList" style="margin:10px 0">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName" width="280px"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button size="small" title="添加SKU" :icon="Plus" type="primary" />
          <el-button size="small" title="编辑SPU" :icon="Edit" type="primary" @click="toEditSpuInfo(row)" />
          <el-button size="small" title="查看SKU" :icon="InfoFilled" type="info" />
          <el-popconfirm title="确定要删除此条数据吗？" @confirm="deleteSpuInfo(row.id)">
            <template #reference>
              <el-button :icon="Delete" type="danger" size="small"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination style="margin-top:10px" v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 20]" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper,->,sizes,total " :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'SpuList'
};
</script>

<script lang="ts" setup>
import { Plus, InfoFilled, Delete, Edit } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
import { reqGetSpuListData, reqDeleteOneSpuInfo } from '@/api/product/spu';
import { useCategorySelectorInfoStore } from '@/stores/categorySelector';
import { ElMessage } from 'element-plus';

const categoryStore = useCategorySelectorInfoStore();
const currentPage = ref(1); // 当前页码
const pageSize = ref(5); // 每页显示的条数
const total = ref(0); // 商品总数量
// 将当前的这个数组使用ref的方式来定义响应式 因为通过.value的方式赋值不影响响应式功能
// .value的值刚好是一个Proxy格式的数据
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const loading = ref(true);
const spuList = ref([]);

// 接收传递过来的自定义事件
const emits = defineEmits(['changeScene', 'getData']);

// 1. 获取页面中的spu数据列表项
const getSpuListData = async () => {
  const result = await reqGetSpuListData(currentPage.value, pageSize.value, categoryStore.category3Id as number);

  spuList.value = result.records;
  total.value = result.total;
};

// 2. 当三级导航分类id变化的时候，获取spu列表数据
watch(
  () => categoryStore.category3Id,
  category3Id => {
    if (!category3Id) {
      // 清空渲染的列表页
      return;
    }
    // 重新发送请求 获取数据
    getSpuListData();
  },
  { immediate: true }
);

// 4. 每页显示多少条触发的时候，也要重新渲染页面
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  pageSize.value = val;
  currentPage.value = 1; // 重置为1

  getSpuListData();
};

// 3. 页码发生变化的时候 重新发送请求
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  currentPage.value = val;
  getSpuListData();
};

// 5. 删除一条spuInfo数据
const deleteSpuInfo = async (id: number) => {
  await reqDeleteOneSpuInfo(id);
  ElMessage.success('删除数据成功');
  getSpuListData();
};

// 6. 单击编辑SPU按钮 实现跳转并传参 这个row就是当前的那一行的spuInfo
const toEditSpuInfo = row => {
  emits('changeScene', 2);
  emits('getData', {
    ...row,
    // 再人为添加两个属性 保证传递过去的数据不会出错
    spuImageList: [],
    spuSaleAttrList: []
  });
};
</script>

<style>
</style>